<style rel="stylesheet/scss" lang="scss" scoped>
    .el-merchant-box {
        width: 100%;
        height: 825px;
        padding: 20px;
        overflow: auto;
        box-sizing: border-box;
        .box-flex {
            display: flex;
            margin-bottom: 10px;
        }
        .w-span {
            min-width: 100px;
            line-height: 40px;
            display: inline-block;
        }
        .l-radio {
            line-height: 40px;
        }
        .pri-btn {
            margin: 0 auto;
        }
        .p-40 {
            padding-top: 10px;
        }
        .m-l-60 {
            padding-left: 150px;
        }
		.otherInput{
			width: 150px;
			border-radius: 4px;
			padding: 0 15px;
			height: 40px;
			line-height: 40px;
			border: 1px solid #dcdfe6;
		}
    }
</style>
<template>
    <div class="el-merchant-box">
        <el-row class=" box-flex">
            <el-col :span="4" class="box-flex m-l-10">
                <span class="w-span">首页样式</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <el-radio label="simple" class="l-radio" v-model="info.style">简单版本(力士)</el-radio>
                <el-radio label="multi" class="l-radio" v-model="info.style">多功能版本(全德式)</el-radio>
            </el-col>
        </el-row>
        <el-row class=" box-flex">
            <el-col :span="4" class="box-flex m-l-10">
                <span class="w-span">C端入口</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">小程序</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.miniAppsEntrance" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">微信号H5</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.h5Entrance" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
        </el-row>
        <el-row class=" box-flex">
            <el-col :span="4" class="box-flex m-l-10">
                <span class="w-span">商城功能</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">在线商城</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.basicMall" active-color="#13ce66" inactive-color="#ff4949" @change="basicFn($event)">
                </el-switch>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">会员等级价</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.seniorMall" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
        </el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span"></span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">挂单下单</span>
			</el-col>
			<el-col :span="1" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.paidAccount" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
		</el-row>
        <el-row class=" box-flex">
            <el-col :span="4" class="box-flex m-l-10">
                <span class="w-span">零件号查询功能</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">零件号查询</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.componentSearch" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">商品适配车型</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.showModelRela" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
        </el-row>
        <el-row class=" box-flex">
            <el-col :span="4" class="box-flex m-l-10">
                <span class="w-span">会员权限</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">会员注册审核</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.memberAudit" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">禁止游客访问</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.mustLogin" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
        </el-row>
        <el-row class=" box-flex">
            <el-col :span="4" class="box-flex m-l-10">
                <span class="w-span">VIN查询</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">开启VIN查询</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.vinSearch" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">日查询数</span>
            </el-col>
            <el-col :span="4" class="box-flex m-l-10 ">
                <el-input type="number" v-model="info.vinNum" />
            </el-col>
        </el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10"></el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">开启收费数据</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.feeVinSearch" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">默认查询次数</span>
			</el-col>
			<el-col :span="4" class="box-flex m-l-10 ">
				<!-- <el-input v-model="info.defaultVinNum" disabled="disabled" v-if="disFlag" @keyup="value=value.replace(/[^\d]/g,'')" /> -->
				<input v-model="info.defaultVinNum"  class="otherInput" @keyup="defaultNumFn"/>
			</el-col>
		</el-row>
        <el-row class=" box-flex">
            <el-col :span="4" class="box-flex m-l-10">
                <span class="w-span">其他功能</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">维护保养</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.maintenanceUpload" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10">
                <span class="w-span">在线客服</span>
            </el-col>
            <el-col :span="3" class="box-flex m-l-10 p-40">
                <el-switch v-model="info.onlineService" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-col>
        </el-row>
        <el-row class="box-flex m-l-60">
            <el-col :span="8" class="box-flex m-l-10">
                <span class="w-span">服务到期</span>
                <el-date-picker type="date" placeholder="选择日期" v-model="info.endTime"> </el-date-picker>
            </el-col>
        </el-row>
        <el-row class="box-flex m-l-60">
            <el-col :span="7" class="box-flex m-l-10">
                <span class="w-span">品类</span>
                <el-tree :data="cateTree" show-checkbox accordion node-key="catId" :indent="25" :default-checked-keys="catIds" @check-change="handleCheckChange">
                </el-tree>
            </el-col>
        </el-row>
        <el-row class="box-flex">
            <!--<el-button type="primary" class="pri-btn" @click="subSerInfo">保存</el-button>-->
        </el-row>
    </div>
</template>
<script>
    export default {
		props: {
			merchantInfo: {
				type: Object,
				default: {}
			},
			cartIdList: {
				type: Array,
				default: []
			},
			merchantId: {
				type: String,
				default: ''
			}
			
		},
        data() {
            return {
                info: {
                    style: 'simple',
                    miniAppsEntrance: false,
                    h5Entrance: false,
                    basicMall: false,
                    seniorMall: false,
                    componentSearch: false,
                    showModelRela: false,
                    memberAudit: false,
                    mustLogin: false,
                    vinSearch: false,
                    vinNum: 0,
                    maintenanceUpload: false,
                    onlineService: false,
                    endTime: '',
					defaultVinNum: 0,
					feeVinSearch:true,
					paidAccount:false,
                },
				disFlag: false,
                catIds: [],
                cateTree: null
            }
        },
        created() {
			this.catIds = this.cartIdList
            this._initTree()
        },
        methods: {
			basicFn(e){
				console.log(e)
				if(!e){
					this.info.paidAccount = false
				}
			},
			defaultNumFn(e) {
				let value = e.srcElement.value
				this.info.defaultVinNum = value.replace(/[^\d]/g,'')
				return e.srcElement.value =  value.replace(/[^\d]/g,'')
			},
			subSerInfo() {
				this.$emit('subSerInfo', this.info, this.catIds)
			},
            _initTree() {
                this.$ajax({
                    api: 'category/querytree',
                    params: {}
                }).then(res => {

                    console.log(res)
                    if (res.status == 200) {
                        this.cateTree = res.data.children
                    }
                }).catch(err => {
                    console.log(err)
                })
				if(this.merchantInfo && this.merchantInfo.merchantCode) {
					this.info.style =  this.merchantInfo.style ? this.merchantInfo.style : 'simple'
					this.info.miniAppsEntrance =  this.merchantInfo.miniAppsEntrance
					this.info.h5Entrance =  this.merchantInfo.h5Entrance
					this.info.basicMall =  this.merchantInfo.basicMall
					this.info.seniorMall =  this.merchantInfo.seniorMall
					this.info.componentSearch =  this.merchantInfo.componentSearch
					this.info.showModelRela =  this.merchantInfo.showModelRela
					this.info.memberAudit =  this.merchantInfo.memberAudit
					this.info.mustLogin =  this.merchantInfo.mustLogin
					this.info.vinSearch =  this.merchantInfo.vinSearch
					this.info.vinNum =  this.merchantInfo.vinNum
					this.info.maintenanceUpload =  this.merchantInfo.maintenanceUpload
					this.info.onlineService =  this.merchantInfo.onlineService
					this.info.endTime =  this.merchantInfo.endTime
					this.info.defaultVinNum = this.merchantInfo.defaultVinNum
					this.info.feeVinSearch  = this.merchantId ?  this.merchantInfo.feeVinSearch : true 
					if(this.info.basicMall){
						this.info.paidAccount = this.merchantInfo.paidAccount
					}else{
						this.info.paidAccount = false
					}
					
					this.disFlag = this.info.defaultVinNum ? true :false
					
				}
            },
            handleCheckChange: function (data, checked, indeterminate) {
                if (data.levelNum == 2) {
                    var i = this.catIds.indexOf(data.catId);
                    if (checked) {
                        if (i == -1) this.catIds.push(data.catId);
                    } else {
                        if (i != -1) this.catIds.splice(i, 1);
                    }
                } else if (!indeterminate) {
                    var children = data.children;
                    if (checked) {
                        for (var i = 0; i < children.length; i++) {
                            if (this.catIds.indexOf(children[i].catId) == -1) this.catIds.push(children[i].catId);
                        }
                    } else {
                        for (var i = 0; i < children.length; i++) {
                            var j = this.catIds.indexOf(children[i].catId);
                            if (j != -1) this.catIds.splice(j, 1);
                        }
                    }
                }
				console.log(this.catIds)
            },
        }

    }
</script>
